<template>
    <div class="app-container">
      <nabars index="6"></nabars>
      <div class="linebtn" style="margin-top: 15px;">
        <div class="btn" @click="setIdx(0)" :class="idx==0?'select':''">好友添加任务</div>
        <div class="btn" @click="setIdx(1)" :class="idx==1?'select':''">好友群发任务</div>
        <div class="btn" @click="setIdx(2)" :class="idx==2?'select':''">群聊群发任务</div>
      </div>
      <topIndex style="margin-bottom: 20px;" :indexCount="indexCount"></topIndex>
      <timedOne v-if="idx==0"></timedOne>
      <timedTwo v-if="idx==1"></timedTwo>
      <timedThree v-if="idx==2"></timedThree>
    </div>
  </template>

  <script>

  import request from '@/utils/request'
  import topIndex from '../components/top-index.vue'
  import timedOne from '../components/timed-one.vue'
  import timedTwo from '../components/timed-two.vue';
  import timedThree from '../components/timed-three.vue';
  import mathNum from "../components/daily.js"
  import nabars from '../components/nabar.vue'
  export default {
    name: "WcGroupsInfo",
    dicts: ['sys_friend_proport'],
    components:{
      nabars,
      topIndex,
      timedOne,
      timedTwo,
      timedThree,
    },
    data() {
      return {
        idx:0,
        indexCount:[{name:'今日总任务',num:0,type:0,bili:0},{name:'已完成任务',num:0,type:0,bili:0},{name:'在进行任务',num:0,type:0,bili:0}],
      };
    },
    created() {
    },
    mounted() {
        this.getDayChange(this.idx==0?0:this.idx==1?2:3)
    },
    methods: {
      setIdx(idx){
          this.idx=idx
          this.getDayChange(idx==0?0:idx==1?2:3)
      },
      getDayChange(taskType){
        getTimedChange({taskType}).then(res=>{
           //console.log(res)
           if(res.code==200){
            if(res.data){
                var num,nums=0
                this.indexCount[0].num=res.data.todayTotal
                this.indexCount[0].type=mathNum(res.data.todayTotal,res.data.yestodayTotal).split('_')[0]
                this.indexCount[0].bili=mathNum(res.data.todayTotal,res.data.yestodayTotal).split('_')[1]

                this.indexCount[1].num=res.data.todayFinish
                this.indexCount[1].type=mathNum(res.data.todayFinish,res.data.yestadayFinish).split('_')[0]
                this.indexCount[1].bili=mathNum(res.data.todayFinish,res.data.yestadayFinish).split('_')[1]

                this.indexCount[2].type=1
                this.indexCount[2].num=res.data.todayIng
            }
           }
        })
      },

    }
};

/** js请求 调用 */

// 查询定时任务信息列表
export function listWcTimedTasks(query) {
  return request({
    url: '/arbit/wctimed_tasks/page',
    method: 'get',
    params: query
  })
}
export function getTimedChange(query) {
  return request({
    url: '/arbit/wctimedTasks/todayStatistics',
    method: 'get',
    params: query
  })
}

</script>
  <style scoped lang="scss">
    .app-container{
      background-color: #f6f9fb;
    }
    .line-state{
      display: flex;
      width: 390px;
      border:1px solid #d1e5ff;
      font-size: 14px;
      border-radius: 5px;
      background-color: #fff;
      .state-box{
        width: 130px;
        height: 35px;
        color: #8c8c8c;
        text-align: center;
        line-height: 35px;
      }
      .frist-border{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .end-border{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      .select{
        color: #fff;
        background-color: #288dfc;
      }
    }
    .frominfo{
      display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
      .from-item{
        display: flex;flex-wrap: wrap;
      }
      .from-Btn{
        display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
      }
    }
    .linebtn{
      display: flex;
      margin: -10px 0 10px 5px;
      height: 38px;
      .btn{
          width: 180px;
          text-align: center;
          line-height: 38px;
          font-size: 14px;
          color: #8c8c8c;
          margin-right: 10px;
          border: 1px solid #eaeff2;
          background-color: #fff;
          border-radius: 5px;
          .link-type{
            color: #8c8c8c;
          }
      }
      .select{
          background-color: #eaf6ff;
          border:1px solid #288dfc;
          color: #288dfc;
          font-weight: 550;
      }
    }
  </style>
